<!--  -->
<template>
  <div class="table">
    <el-table
      class="bigScreen-table"
      :data="tableData"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      max-height="440px"
    >
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  mounted() {
    this.autoScroll();
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      headerCellStyle: {
        background: "#0d2d51",
        color: "#fff",
        fontSize: "16px",
        fontWeight: "normal",
        textAlign: "center",
        borderColor: "#0d2d51",
        height: "73px",
      },
      cellStyle: {
        background: "#08162a",
        color: "#fff",
        fontSize: "16px",
        fontWeight: "normal",
        height: "73px",
        textAlign: "center",
        borderColor: "#1a62a6",
      },
    };
  },

  methods: {
    autoScroll() {
      const wrapper = this.$el.querySelector(".el-table__body-wrapper");
      let intervalId;
      let isHovering = false;

      wrapper.addEventListener("mouseenter", () => {
        isHovering = true; // 鼠标悬停时停止滚动
      });
      wrapper.addEventListener("mouseleave", () => {
        isHovering = false; // 鼠标离开时恢复滚动
      });

      const scrollStep = () => {
        if (!isHovering) {
          if (wrapper.scrollTop < wrapper.scrollHeight - wrapper.clientHeight) {
            wrapper.scrollTop++;
          } else {
            wrapper.scrollTop = 0;
          }
        }
      };

      intervalId = setInterval(scrollStep, 50); // 设置滚动速度

      this.$once("hook:beforeDestroy", () => {
        clearInterval(intervalId); // 组件销毁时清除定时器
      });
    },
  },

  components: {},

  computed: {},
};
</script>
<style lang="scss" scoped>
.table {
  .bigScreen-table {
    background: #08162a;
  }
  ::v-deep {
    // 隐藏滚动条，并且宽度不占位
    .el-table__body-wrapper::-webkit-scrollbar {
      display: none;
    }
    .el-table .el-table__cell.gutter {
      background: #0d2d51;
      display: table-cell !important;
    }
    // ----------修改elementui表格的默认样式-----------
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        // 整个滚动条
        width: 0; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);
        border: none;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道
        border: none;
      }
    }

    // --------------------隐藏table gutter列和内容区右侧的空白 start
    .el-table th.gutter {
      display: none;
      width: 0;
    }
    .el-table colgroup col[name="gutter"] {
      display: none;
      width: 0;
    }

    .el-table__body {
      width: 100% !important;
    }
  }
}
</style>
